<template>
  <div class="userCenter">
			<div class="top-box">
					<img class="head-photo" src="https://cyxshop.oss-cn-beijing.aliyuncs.com/userCenter-1.png"/>
					<p class="no">ID：2832899</p>
			</div>
			<div class="nav-box">
				<a href="#" class="nav-1">绑定账户</a>
				<a href="#" class="nav-2">推荐</a>
				<a href="#" class="nav-3">帮助中心</a>
				<a href="#" class="nav-4">关于我们</a>
			</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      motto: 'Hello miniprograme',
      userInfo: {
        nickName: 'mpvue',
        avatarUrl: 'http://mpvue.com/assets/logo.png'
      }
    }
  },

  methods: {
    
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
	.top-box{
		width: 375px;
		height: 103px;
		padding-top: 12px;
		background: linear-gradient(to right, #7dc062 , #00be98); /* 标准的语法 */
	}
	
	.top-box .head-photo{
		display: block;
		width: 60px;
		height: 60px;
		border-radius: 100%;
		border: 1px solid #FFFFFF;
		margin: 0 auto;
	}
	
	.top-box .no{
		font-size: 14px;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		margin-top: 10px;
	} 
	
	.nav-box{
		width: 375px;
	}
	
	.nav-box a{
		color: #333333;
		display: block;
		height: 45px;
		font-size: 15px;
		line-height: 45px;
		border-bottom: 1px solid #cccccc;
		text-indent: 48px;
	}
	
	.nav-box a.nav-1{
		background: url(https://cyxshop.oss-cn-beijing.aliyuncs.com/userCenter-2.png) 15px center no-repeat;
		background-size:28px ;
	}
	
	.nav-box a.nav-2{
		background: url(https://cyxshop.oss-cn-beijing.aliyuncs.com/userCenter-3.png) 15px center no-repeat;
		background-size:28px ;
	}
	
	.nav-box a.nav-3{
		background: url(https://cyxshop.oss-cn-beijing.aliyuncs.com/userCenter-5.png) 15px center no-repeat;
		background-size:28px ;
	}

	.nav-box a.nav-4{
		background: url(https://cyxshop.oss-cn-beijing.aliyuncs.com/userCenter-6.png) 15px center no-repeat;
		background-size:28px ;
	}
</style>
